<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${_ctx}" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>订单详情页面</title>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
			<script type="text/javascript" src="js/area.js"></script>
		<link rel="stylesheet" type="text/css" href="css/htorderxiangqingcs.css"/>
		<script type="text/javascript">
			$(function(){
				$(".gbimg").click(function(){
					$(".adddzpager").hide();
					
				})
				//发货按钮
				$("#fahuo-btn").click(function(){
					
					console.log("${order.orstatus}")
					if("${order.orstatus}"=="已支付"){
						$(".adddzpager").show();
					}else{
						$(".chongfuselect").text("当前状态不能发货")
						$(".chongfuselect").fadeIn(700);
						$(".chongfuselect").fadeOut(700);
						return;
					}
				})
				//ajax发货
				$(".dzbtnbc").click(function(){
					var $orid="${order.orid}";
					$("#orstatus").text("已发货");
					$.ajax({
						type:"post",
						url:"htmain?v=uporder",
						data:"orid="+$orid+"&orstatus=已发货",
						success:function(msg){
							
						}
					})
					$(".adddzpager").hide();
					$(".chongfuselect").text("发货成功");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				})
			})
			
		</script>
		<style type="text/css">
			.layui-btn{
				margin-right: 10px;
				margin-bottom: 10px;
				display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 40px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}
			.addonetype{
				text-align: right;
				clear: both;
			}
			/*新增地址弹出层*/
			.adddzpager{
				display: none;
				width: 100%;
				height: 104%;
				position: fixed;
				top: -20px;
				z-index: 99999;
				background-color: rgba(0,0,0,0.3);
			}
			.adddz{
				width: 63%;
				height: 500px;
				margin:80px 124px;
				background-color: #fff;
			}
			.adddz .guanbi{
				margin-bottom: 10px;
			}
			.adddz .guanbi:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.adddz .guanbi .gbtitle{
				float: left;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbtitle h3{
				font-weight: 550;
			}
			.adddz .guanbi .gbtitle small{
				font-size: 12px;
			}
			.adddz .guanbi .gbimg{
				float: right;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbimg img{
				width: 24px;
				height: 24px;
			}
			.text-danger{
				color: red;
			}
			.form-group{
				margin-bottom: 15px;
			}
			.form-group:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.juzhong{
				width: 80%;
				margin: 0 auto;
			}
			.control-label{
				padding-top: 7px;
				text-align: right;
				padding-right: 15px;
			}
			.form-control{
				width: 100%;
				height: 20px;
				padding: 6px 12px;
				border: 1px solid #ccc;
				border-radius: 2px;
			}
			.dzliandong{
				width: 150%;
			}
			.dzliandong select{
				padding: 7px 1px;
			}
			.checkbox{
				padding: 7px;
			}
			.col-xs-5{
				margin-left: 76%;
			}
			.dzbtnbc{
				padding: 4px 40px;
				font-size: 18px;
				border-radius: 3px;
				color: #fff;
				background-color: #2f973f;
				border-color: #2f973f;
				border: 1px solid transparent;
			}
			.chongfuselect{
				position: fixed;
				top: 211px;
				left: 480px;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
				width: 160px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-radius: 5px;
				font-size: 14px;
				z-index: 9999;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="chongfuselect">
			<p>未选中商品</p>
		</div>
		<div id="addcombox">
			<ul class="nav-tabs">
				<li class="active">
					<a>订单详情</a>
				</li>
				
			</ul>
			<div class="tab-content">
				<div class="tab-pane">
					<table class="table list-table">
						<thead>
							<tr>
								<th>商品名称</th>
								<th>商品进价</th>
								<th>商品售价</th>
								<th>商品数量</th>
								<th>小计</th>
							</tr>
						</thead>
						<c:forEach var="c" items="${details}">
						<tr>
							<td>${c.cname}</td>
							<td>￥${c.sbid}</td> 
							<td>￥${c.deprice}</td>
							<td>${c.dedcount}</td>
							<td>￥${c.dedcount*c.deprice}</td>
						</tr>
						</c:forEach>
					</table>
					<div class="row">
						<div class="col-md-6">
							<div class="box box-success box-solid">
								<div class="box-header">
									订单信息
								</div>
								<div class="box-body">
									<table class="table form-table">
										<tr>
											<th>订单编号</th>
											<td>${order.orid}</td>
										</tr>
										<tr>
											<th>当前状态</th>
											<td id="orstatus">${order.orstatus}</td>
										</tr>
										<tr>
											<th>订单金额</th>
											<td>${order.orprice}</td>
										</tr>
										<tr>
											<th>下单时间</th>
											<td>${order.ortime}</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="box box-success box-solid">
								<div class="box-header">
									收货人信息
								</div>
								<div class="box-body">
									<table class="table form-table">
										<tr>
											<th>收货人</th>
											<td>${order.oruser}</td>
										</tr>
										<tr>
											<th>手机号</th>
											<td>${order.orphone}</td>
										</tr>
										<tr>
											<th>收货地址</th>
											<td>${order.ordizhi}</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="addonetype">
							<button id="fahuo-btn" class="layui-btn">发货</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="adddzpager">
			<div class="adddz">
				<div class="guanbi">
					<div class="gbtitle">
						<h3>发货地址
							<small>Out Address</small>
						</h3>
					</div>
					<div class="gbimg">
						<img src="imgs/liuimgs/dzgb.png" />
					</div>
				</div>
				<div class="juzhong">
					<form action="" method="">
						<div class="form-group">
							<label class="col-xs-2 control-label">收货人姓名
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" value="${order.oruser}" placeholder="收货人姓名" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">收货地区
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" value="${order.ordizhi}" placeholder="收货人地址" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">详细地址
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder="请填写详细的地址门牌号码,无需重复填写地区" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">手机
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" value="${order.orphone}" class="form-control" placeholder="收货人手机号码" />
							</div>
						</div>
						<div class="col-xs-5 ">
							<div class="checkbox">
								<button type="button" class="dzbtnbc">发货</button>
							</div>
						</div>
					</form>
					
				</div>
			</div>
		</div>
	</body>
</html>